<!--  header结束-->
<div class="userPosition comWidth">
	<strong><a href="#">首页</a></strong>
	<span>&nbsp;&gt;&nbsp;</span>
	<a href="normal.html">标准图谱</a>
	<span>&nbsp;&gt;&nbsp;</span>
	<a href="normal-detail.html"><em>一元二次方程</em></a>
    <span>&nbsp;&gt;&nbsp;</span>
    <em>查看</em>
</div>

<div class="normalMap-show comWidth">
	<ul class="normalMap-show-item">                        
        <!--</li><li><a href="<?php echo yii\helpers\Url::to(['normal/mapinfo'])?>">力矩图呈现</a></li>-->
<!--	<li><a href="<?php // echo yii\helpers\Url::to(['normal/mapinfo2'])?>" class="active" target="_self">树形图呈现</a></li>
	<li><a href="<?php // echo yii\helpers\Url::to(['normal/mapinfo3'])?>" target="_self">地图层级呈现</a></li>-->
	</ul>
    
    <div class="normalMap-show-edit">
<!--            <a href="https://www.sogou.com/tupu/person.html?q=%E8%83%A1%E6%AD%8C&id=1586078" target="#" class="course-go" data-gaevent=                              "course-go:v4.0.0.0:academy">
            <span class="icon-go"></span>案例
            </a>-->
        <a href="<?php echo \yii\helpers\Url::to(['normal/kityminder'])?>" class="course-go" target="#" data-gaevent=                              "course-go:v4.0.0.0:academy">
            <span class="icon-go"></span>自定义此图谱
            </a>
    </div>    
</div>

<!--图谱呈现开始 -->
<div class="normalMap-show-force" id="showRight" style="width:1200px; margin-left:auto; margin-right:auto;height:600px;margin-top:20px;border:#666 solid 1px;background-color: rgb(238, 241, 245);"></div>
         <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<!--    <div id="main" style="height:700px"></div>-->
    <!-- ECharts单文件引入 -->
    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
    <script type="text/javascript">
        // 路径配置
        require.config({
            paths: {
                echarts: 'http://echarts.baidu.com/build/dist'
            }
        });
        
        // 使用
        require(
            [
                'echarts',
                'echarts/chart/force', // 使用柱状图就加载bar模块，按需加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('showRight')); 
                 // 添加点击事件  
                var ecConfig = require('echarts/config');  
                myChart.on(ecConfig.EVENT.CLICK, eConsole);  
                 var  option = {
    title : {
//        text: '人物关系：乔布斯',
//        subtext: '数据来自人立方',
//        x:'right',
//        y:'bottom'
    },
    tooltip : {
        trigger: 'item',
        formatter: '{a} : {b}'
    },
    legend: {
        x: 'left',
//        selected:{'朋友':true,'家人':true},
        data:['家人','朋友'],
		show:false,
    },
    isShowScrollBar:false,
    series: [
        {
            type:'force',
            categories : [
                {
                    name: '人物',
                    itemStyle: {
                        normal: {
                            color : '#87cdfa'
                        }
                    }
                },
                {
                    name: '家人',
                    itemStyle: {
                        normal: {
                            color : '#ff7f50'
                        }
                    }
                },
                {
                    name:'朋友',
                    itemStyle: {
                        normal: {
                            color : '#ff7f50'
                        }
                    }
                }
            ],
            itemStyle: {
                normal: {
                    label: {
                        show: true,
                        textStyle: {
                            color: '#000000',
                            fontFamily: '"Microsoft YaHei",微软雅黑',
                        }
                    },
                    nodeStyle : {
                        brushType : 'both',
                        strokeColor : 'rgba(255,215,0,0.4)',
                        lineWidth : 2
                    }
                },emphasis:{
                    linkStyle : { strokeColor : '#5182AB'}
                }
            },
            clickable : true,
            minRadius : 40,
            maxRadius : 40,
            density : 0.8,
            attractiveness: 0.8,
            gravity:4.0,
            draggable:true,
            nodes:[
                {category:0, name: '小学数学', value : 10,shapeType:'rectangle',onclick:function(params){
                     
                     params.target.style.text = "一年级数学详细信息";
                     alert(params.target.style.text);
                },
                  itemStyle:{
                    normal:{
                        width:100,
                        height:80
                    }
                }},
                {category:1, name: '数与计算',value : 2,shapeType:'ellipse',onclick:function(params){
                        window.location.href='<?php echo yii\helpers\Url::to(['normal/knowresshow'])?>';
                },
                itemStyle:{
                    normal:{
                        width:100,
                        height:50
                    }
                }},
                {category:1, name: '加减法',value : 3,},
                {category:1, name: '乘除法',value : 3},
                {category:1, name: '统计',value : 7},
                {category:2, name: '笔记',value : 5},
                {category:2, name: '时钟',value : 8,shapeType:'rectangle'},
                {category:2, name: '混合运算',value : 9},
                {category:2, name: '一位数加法',value : 2,},
                {category:2, name: '一位数减法',value : 2,},
                {category:2, name: '加减法综合',value : 2,}
            ],
            links : [
                {source : 1, target : 0, weight : 1,
                onclick:function(params){
                     alert(params.target.style.text);
                },
//                itemStyle:{
//                    normal:{
//                        lineWidth:10,
//                        text:'丽萨-乔布斯',
//                        textColor:'#030303',
//                        textFont:'bold 15px verdana',
//                        textPosition:'inside'
//                    }
//                }
            },
                {source : 2, target : 0, weight : 2},
                {source : 3, target : 0, weight : 1},
                {source : 4, target : 0, weight : 2},
                {source : 5, target : 0, weight : 3},
                {source : 6, target : 0, weight : 6},
                {source : 7, target : 0, weight : 6},
                {source : 8, target : 2, weight : 1},
                {source : 9, target : 2, weight : 1},
                {source : 10, target : 2, weight : 1},
                
            ]
        }
    ]
}
                    
                    
        
                // 为echarts对象加载数据 
                myChart.setOption(option); 
            }
        );
        
        function eConsole(param) {    
         window.location.href='<?php echo yii\helpers\Url::to(['normal/knowresshow'])?>';
    }    
    
    </script>



